<template>
  <div class="container" style="height: 100%">
    <div
      class="m_bottom10"
      v-if="store.state.has_copy_mould && store.state.user_info.isAdmin"
    >
      <el-button type="primary" @click="show_enterprise_box = true">复制到企业</el-button>
    </div>
    <div
      class="flex"
      :style="{
        height:
          store.state.has_copy_mould && store.state.user_info.isAdmin
            ? 'calc(100% - 40px)'
            : '100%',
      }"
    >
      <div class="left">
        <el-menu
          class="el-menu-vertical-demo"
          size="small"
          unique-opened
          :default-active="default_menu"
          @select="
            (e) => {
              get_mould_tabs_list(e);
            }
          "
        >
          <el-sub-menu v-for="item in menu_list" :key="item.id" :index="item.id">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(item1, index1) in item.children"
              :key="index1"
              :index="item1.id"
              >{{ item1.name }}</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="right flex1">
        <div>
          <div class="flex_cm" style="height: 100%">
            <div class="flex border_bottom">
              <div
                class="tab_item"
                v-for="(item, index) in mould_tabs"
                :key="item.id"
                @click="tabs_value = index"
              >
                <span
                  v-show="item.is_checked"
                  :style="{ color: tabs_value == index ? '#3580eb' : '' }"
                  >{{ item.name }}</span
                >
              </div>
            </div>
            <div
              v-for="(item, index) in mould_tabs"
              :key="item.id"
              style="overflow-y: auto; width: 100%"
            >
              <div v-show="tabs_value == index" style="width: 100%">
                <el-form label-width="160px" style="margin-top: 10px">
                  <div class="form_box" v-show="tabs_value == 0">
                    <el-form-item label="类型编码">
                      <el-input disabled v-model="default_code"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                      <el-select
                        v-model="status"
                        :disabled="
                          !has_role_list[0].has_role ||
                          !store.state.current_enterprise_level.some((i) => {
                            return i.productId == '2' && ['3', '4'].includes(i.levelId);
                          })
                        "
                        style="width: 100%"
                      >
                        <el-option :value="true" label="启用"></el-option>
                        <el-option :value="false" label="停用"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="form_box">
                    <div
                      v-for="item2 in item.templateFormMetadataDealList"
                      :key="item2.id"
                    >
                      <el-form-item v-show="item2.is_checked" :label="item2.name">
                        <el-input
                          :disabled="
                            !has_role_list[0].has_role ||
                            !store.state.current_enterprise_level.some((i) => {
                              return i.productId == '2' && ['3', '4'].includes(i.levelId);
                            })
                          "
                          v-show="item2.type == 1 || item2.type == 2"
                          :type="
                            item2.type == 1 ? 'text' : item2.type == 2 ? 'number' : ''
                          "
                          v-model="item2['value_' + item.id + default_menu]"
                        ></el-input>
                        <el-select
                          :disabled="
                            !has_role_list[0].has_role ||
                            !store.state.current_enterprise_level.some((i) => {
                              return i.productId == '2' && ['3', '4'].includes(i.levelId);
                            })
                          "
                          v-model="item2['value_' + item.id + default_menu]"
                          v-show="item2.type == 3 || item2.type == 4"
                        >
                          <el-option
                            v-for="item3 in item2.metadataValueList"
                            :label="item3.name"
                            :value="item3.name"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                </el-form>
                <div
                  class="m_top10"
                  v-for="(item1, index1) in item?.children"
                  :key="item1.id"
                >
                  <div v-show="item1?.is_checked">
                    <div>{{ item1.name }}</div>
                    <el-table
                      style="margin: 10px 0; width: 100%"
                      :data="item1?.formSubCollectionDealList"
                      max-height="300px"
                    >
                      <el-table-column
                        label="序号"
                        type="index"
                        width="60px"
                        fixed
                      ></el-table-column>
                      <el-table-column
                        min-width="120px"
                        v-for="item3 in item1?.templateFormMetadataDealList
                          ?.formSubCollectionValueDealList"
                        :label="item3.name"
                      >
                        <template #default="scope: any">
                          <!-- 匹配列表列 是否变化  并显示未改变列 和 值 -->
                          <div v-show="scope.row?.formSubCollectionValueDealList">
                            <div
                              style="white-space: nowrap; overflow: auto"
                              v-for="item4 in scope.row?.formSubCollectionValueDealList"
                              :key="item4.id"
                            >
                              <span
                                v-show="
                                  item4.id == item3.id || item4.metadataId == item3.id
                                "
                                >{{ item4.value }}</span
                              >
                            </div>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column label="状态" fixed="right" width="100">
                        <template #default="scope: any">
                          <div v-if="!scope.row.isEnable">已禁用</div>
                          <div v-else style="color: #3580eb">已启用</div>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="操作"
                        fixed="right"
                        :width="tabs_value == 0 ? '160' : '100'"
                      >
                        <template #default="scope: any">
                          <el-dropdown
                            v-show="
                              has_role_list[0].has_role &&
                              store.state.current_enterprise_level.some((i) => {
                                return (
                                  i.productId == '2' && ['3', '4'].includes(i.levelId)
                                );
                              })
                            "
                          >
                            <el-button> 更多 </el-button>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  @click="
                                    update_list({
                                      item_current: scope.row, // 列值
                                      row_index: scope.$index, // 第几列
                                      index1: index1, // 第几个列表
                                      index: index, // 第几个tab栏
                                      item: JSON.parse(
                                        JSON.stringify(
                                          item1?.templateFormMetadataDealList
                                        )
                                      ), // 列表参数
                                      type: 1,
                                    })
                                  "
                                  >编辑</el-dropdown-item
                                >
                                <el-dropdown-item
                                  v-if="scope.row.isEnable"
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 2,
                                    })
                                  "
                                  >禁用</el-dropdown-item
                                >
                                <el-dropdown-item
                                  v-else
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 2,
                                    })
                                  "
                                  >启用</el-dropdown-item
                                >
                                <el-dropdown-item
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 3,
                                    })
                                  "
                                  >删除</el-dropdown-item
                                >
                                <el-dropdown-item
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 4,
                                    })
                                  "
                                  >置顶</el-dropdown-item
                                >
                                <el-dropdown-item
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 5,
                                    })
                                  "
                                  >上移</el-dropdown-item
                                >
                                <el-dropdown-item
                                  @click="
                                    update_list({
                                      item: scope.row,
                                      row_index: scope.$index,
                                      index1: index1,
                                      type: 6,
                                    })
                                  "
                                  >下移</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                          <el-button
                            type="primary"
                            class="m_left10"
                            v-show="tabs_value == 0"
                            @click="preview_to_3d(scope.row)"
                          >
                            预览
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-button
                      v-show="
                        has_role_list[0].has_role &&
                        store.state.current_enterprise_level.some((i) => {
                          return i.productId == '2' && ['3', '4'].includes(i.levelId);
                        })
                      "
                      type="primary"
                      size="small"
                      @click="
                        add_table_data({
                          index: index,
                          index1: index1,
                          item: item1?.templateFormMetadataDealList,
                        })
                      "
                      >添加{{ item1.name }}</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="mould_tabs?.length">
          <div
            style="padding-top: 10px"
            v-if="
              has_role_list[0].has_role &&
              store.state.current_enterprise_level.some((i) => {
                return i.productId == '2' && ['3', '4'].includes(i.levelId);
              })
            "
          >
            <el-button type="primary" @click="submit" :loading="save_loading"
              >保存</el-button
            >
            <el-button type="primary" @click="reset" :loading="save_loading"
              >复位</el-button
            >
          </div>
          <div>
            <preview style="width: 100%; height: 100%; overflow: hidden"></preview>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      v-model="show_add_box"
      direction="rtl"
      size="30%"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <template #title
        ><h4>{{ show_add_box_zh }}</h4></template
      >
      <template #default>
        <el-form label-width="150px">
          <el-form-item
            :label="item.name"
            v-for="item in add_form_list.formSubCollectionValueDealList"
            :key="item.id"
          >
            <el-input
              placeholder="请输入"
              v-model="item.value"
              v-show="item.type == 1 || item.type == 2"
              show-word-limit
              maxlength="100"
            ></el-input>
            <div v-show="item.type == 4 || item.type == 3" class="flex">
              <el-select v-model="item.value">
                <el-option
                  v-for="item1 in item.metadataValueList"
                  :label="item1.name"
                  :value="item1.name"
                  :key="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
        <div class="tr m_top10">
          <el-button @click="show_add_box = false">取消</el-button>
          <el-button type="primary" @click="add_submit">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer
      v-model="show_enterprise_box"
      direction="rtl"
      size="30%"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form label-width="150px">
        <el-form-item label="请选择企业">
          <el-select v-model="select_enterpriseId" @change="select_enterprise" clearable>
            <div v-for="item in enterprise_list" :key="item.id">
              <el-option
                v-if="item.has_copy_mould && item.id != store.state.enterprise_id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </div>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="tr m_top10">
        <el-button @click="(show_enterprise_box = false), (select_enterpriseId = '');"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="submit_select_enterprise"
          :disabled="select_enterpriseId == ''"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
export default {
  name: "mould_list",
};
</script>
<script lang="ts" setup>
import { check_role } from "@/utils/check_role";
import preview from "./preview_3d.vue";
import { onMounted, ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import AModelFmulaUtils from "@/model/utils/AModelFmulaUtils";
import MD from "@/model/MD";
import SceneMgr from "@/model/manager/SceneMgr";
import { MgrDef } from "@/model/const/ModelConst";
import { useStore } from "vuex";
const store = useStore();
const has_role_list = ref([{ path: "mould/post", has_role: false }]);
const menu_list = ref();
const default_menu = ref(""); // 菜单默认
const default_code = ref(); // 类型编码
const tabs_value = ref(0);
const status = ref(true);
const select_enterpriseId = ref("");
const select_enterpriseName = ref();
const select_enterprise = (e) => {
  enterprise_list.value.some((item) => {
    if (item.id == select_enterpriseId.value) {
      select_enterpriseName.value = item.name;
    }
    return item.id == select_enterpriseId.value;
  });
};
const show_enterprise_box = ref(false);
const enterprise_list = computed(() => {
  return store.state.enterprise_list;
});
const submit_select_enterprise = () => {
  ElMessageBox.confirm(
    "确定将该模板库数据复制到企业 - " +
      select_enterpriseName.value +
      ", 该企业原有模板库数据将被覆盖",
    "",
    {
      cancelButtonText: "取消",
      confirmButtonText: "确定",
      closeOnClickModal: false,
      type: "warning",
    }
  )
    .then(() => {
      axios
        .request({
          url: serviceApi.copy_templateCollocation,
          method: "post",
          params: { targetEnterpriseId: select_enterpriseId.value },
        })
        .then((res) => {
          console.log(res);
          select_enterpriseId.value = "";
          show_enterprise_box.value = false;
          ElMessage.success("操作成功！");
        })
        .catch((err) => {
          ElMessage.error(err);
        });
    })
    .catch(() => {});
};
onMounted(() => {
  console.log(store.state.enterprise_list);
  tabs_value.value = 0;
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item);
  });
  get_metadata();
});
const reset = () => {
  MD.SC.resetCameraPosition();
};

const preview_to_3d_list = ref();
const preview_to_3d = (e) => {
  // 常用尺寸列表的 参数列
  let itemObj = {
    formDTOList: preview_to_3d_list.value,
    code: default_code.value,
  };
  let itemObj2 = {};
  //   let list =
  //     mould_tabs.value[0]?.children[0]?.templateFormMetadataDealList
  //       .formSubCollectionValueDealList
  e.formSubCollectionValueDealList.forEach((item) => {
    itemObj2[item.metadataCode] = item.value;
    // item.value = e.formSubCollectionValueDealList[index].value
  });
  //   list.forEach((item, index) => {
  //     itemObj2[item.code] = Number(e.formSubCollectionValueDealList[index].value)
  //     // item.value = e.formSubCollectionValueDealList[index].value
  //   })
  // itemObj = Object.assign(itemObj,itemObj2);

  console.log(itemObj, itemObj2);
  let aludata = AModelFmulaUtils.getAluObject(itemObj, itemObj2);

  // 预览铝模板
  MD.SC.updateALByType(default_code.value, aludata);
};
const save_loading = ref(false);
const submit = () => {
  //   console.log(mould_tabs.value)
  if (save_loading.value) return;
  save_loading.value = true;
  var data = [];
  for (let i in mould_tabs.value) {
    if (mould_tabs.value[i].is_checked) {
      var a = {
        // tab栏列表
        formId: mould_tabs.value[i].id,
        formValueDealList: [], // tab栏下参数
        formSubDealList: [], // tab栏下表格
      };
      for (let ii in mould_tabs.value[i].templateFormMetadataDealList) {
        var a_1 = {
          metadataId: mould_tabs.value[i].templateFormMetadataDealList[ii].id,
          value:
            mould_tabs.value[i].templateFormMetadataDealList[ii][
              "value_" + mould_tabs.value[i].id + default_menu.value
            ],
        };
        a.formValueDealList.push(a_1); // tab栏下参数
      }
      for (let ii in mould_tabs.value[i].children) {
        if (mould_tabs.value[i].children[ii].is_checked) {
          var b = {
            formId: mould_tabs.value[i].children[ii].id,
            formSubCollectionDealList: [],
          };
          mould_tabs.value[i].children[ii].formSubCollectionDealList.forEach((item) => {
            var c = {
              formSubCollectionValueDealList: [],
              isEnable: item.isEnable,
            };
            console.log(item);
            if (item.formSubCollectionValueDealList) {
              item.formSubCollectionValueDealList.forEach((item1) => {
                console.log(item1, item1.value);
                if (item1.is_checked) {
                  var c_1 = {
                    // 列表参数
                    metadataId: item1.id ? item1.id : item1.metadataId,
                    value: item1.value,
                  };
                  c.formSubCollectionValueDealList.push(c_1);
                }
              });
            }
            b.formSubCollectionDealList.push(c);
          });
          a.formSubDealList.push(b);
        }
      }

      data.push(a);
    }
  }
  console.log(data);
  axios
    .request({
      url: serviceApi.template_update + "/" + default_menu.value,
      method: "put",
      data: {
        formDealList: data,
        isEnable: status.value,
        code: default_code.value,
      },
    })
    .then((res) => {
      console.log(res);
      ElMessage.success("保存成功！");
      save_loading.value = false;
    })
    .catch((error) => {
      save_loading.value = false;
      ElMessage.error(error);
    });
};

const row_index = ref(); // 修改 table 的 index
const update_type = ref(0); // 修改 table 的 类型
const update_list = (e) => {
  console.log(e);
  update_type.value = e.type;
  row_index.value = e.row_index;
  add_form_index.value = e.index1;
  var list =
    mould_tabs.value[tabs_value.value].children[add_form_index.value]
      .formSubCollectionDealList;
  if (e.type == 1) {
    e.item.formSubCollectionValueDealList.forEach((item1) => {
      e.item_current.formSubCollectionValueDealList.forEach((item2) => {
        if (item2.metadataId == item1.id || item2.id == item1.id) {
          item1.value = item2.value;
        }
      });
    });

    show_add_box_zh.value = "编辑";
    // 编辑
    add_form_list.value = e.item;
    show_add_box.value = true;
    console.log(add_form_list.value);
  } else if (e.type == 2) {
    // 禁/启用
    list[e.row_index].isEnable = !list[e.row_index].isEnable;
  } else if (e.type == 3) {
    // 删除
    list.splice(e.row_index, 1);
  } else if (e.type == 4) {
    // 置顶
    list.unshift(list.splice(e.row_index, 1)[0]);
  } else if (e.type == 5) {
    // 上移
    if (e.row_index != 0) {
      list[e.row_index] = list.splice(e.row_index - 1, 1, list[e.row_index])[0];
    } else {
      ElMessage.warning("已经置顶了");
    }
  } else if (e.type == 6) {
    // 下移
    if (e.row_index != list?.length - 1) {
      list[e.row_index] = list.splice(e.row_index + 1, 1, list[e.row_index])[0];
    } else {
      ElMessage.warning("已经最底部了");
    }
  }
  console.log(list);
};
const add_submit = () => {
  console.log(add_form_list.value);
  if (update_type.value == 0) {
    mould_tabs.value[tabs_value.value].children[
      add_form_index.value
    ].formSubCollectionDealList.push(add_form_list.value);
  } else {
    mould_tabs.value[tabs_value.value].children[
      add_form_index.value
    ].formSubCollectionDealList[row_index.value] = add_form_list.value;
    update_type.value = 0;
  }
  show_add_box.value = false;
  console.log(mould_tabs.value[tabs_value.value]);
};
const show_add_box = ref(false); // 列表添加弹窗
const add_form_list = ref(); // 增加列表的数据
const add_form_index = ref(); // 增加 第几个列表 数据
const show_add_box_zh = ref();
// 添加列表数据
const add_table_data = (e) => {
  console.log(e);
  e.item.formSubCollectionValueDealList.forEach((item) => {
    item.value = "";
  });
  show_add_box_zh.value = "新增";
  update_type.value = 0;
  add_form_index.value = e.index1;
  add_form_list.value = JSON.parse(JSON.stringify(e.item));
  show_add_box.value = true;
};
const get_template_setData = (e) => {
  // 获取模板下的配置参数
  console.log(e);
  mould_tabs.value.forEach((element) => {
    element.is_checked = false;
    element.templateFormMetadataDealList = []; // tab栏下参数
    element.children.forEach((item) => {
      item.is_checked = false;
      item.templateFormMetadataDealList = []; // tab栏下列表参数   列值
    });
  });
  metadata.value.forEach((element) => {
    element.is_checked = false;
  });
  axios
    .request({
      url: serviceApi.mould_template_getData + "/" + e,
      method: "get",
    })
    .then((res) => {
      console.log(res);
      default_code.value = res.data.code;
      default_menu.value = res.data.id;
      var list = res.data.formDealList ? res.data.formDealList : [];
      var a = mould_tabs.value; // 顶部栏原数据
      var b = metadata.value; // 元数据  （参数）原数据
      for (let i in list) {
        var p_obj = []; // 选中tab中头部的参数
        for (let ii in list[i].metadataDealList) {
          for (let k in b) {
            if (b[k].id == list[i].metadataDealList[ii].metadataId) {
              b[k].is_checked = true;
              var obj_item = "value_" + list[i].id + default_menu.value;
              b[k][obj_item] = "";
              b[k].value = "";
              p_obj.push(b[k]);
              continue;
            }
          }
        }
        // console.log(p_obj)
        for (let j in a) {
          if (a[j].id == list[i].formId) {
            // 如果该formId 为tab栏
            a[j].is_checked = true;
            a[j].templateFormMetadataDealList = p_obj;
            continue; // 如果该formId 为tab栏 到此停止本次循环
          }
        }
        for (let l in a) {
          for (let ll in a[l].children) {
            if (a[l].children[ll].id == list[i].formId) {
              // 如果该formId 为tab下的列表
              var item = {
                isEnable: true,
                formSubCollectionValueDealList: p_obj,
              };
              a[l].children[ll].is_checked = true;
              a[l].children[ll].formSubCollectionDealList = [];
              a[l].children[ll].templateFormMetadataDealList = JSON.parse(
                JSON.stringify(item)
              );
            }
          }
        }
      }
      console.log(a);
      var a_1 = [];
      a.forEach((element) => {
        if (element.is_checked) {
          a_1.push(element);
        }
      });

      console.log(a_1);
      mould_tabs.value = a_1;
      metadata.value = b;
      get_info_data(e);
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};

const get_info_data = (e) => {
  // 回填模板下参数的值
  axios
    .request({
      url: serviceApi.template_getInfo + "/" + e,
      method: "get",
    })
    .then((res) => {
      console.log(res);
      preview_to_3d_list.value =
        res.data.formDTOList == null
          ? []
          : JSON.parse(JSON.stringify(res.data.formDTOList));
      var list = res.data == null ? [] : res.data.formDTOList;
      status.value = res.data.isEnable;
      var a = mould_tabs.value; // 顶部栏原数据
      console.log(metadata.value);
      for (let i in list) {
        var obj_item = "value_" + list[i].formId + default_menu.value; // 表单绑定唯一值
        console.log(obj_item);
        for (let j in a) {
          if (a[j].id == list[i].formId) {
            // 如果该formId 为tab栏
            for (let jj in a[j].templateFormMetadataDealList) {
              for (let ii in list[i].formValueList) {
                if (
                  a[j].templateFormMetadataDealList[jj].id ==
                  list[i].formValueList[ii].metadataId
                ) {
                  a[j].templateFormMetadataDealList[jj][obj_item] =
                    list[i].formValueList[ii].value;
                }
              }
            }
            continue; // 如果该formId 为tab栏 到此停止本次循环
          }
        }
        for (let l in a) {
          for (let ll in a[l].children) {
            if (list[i].formSubDTOList) {
              for (let ii in list[i].formSubDTOList) {
                if (a[l].children[ll].id == list[i].formSubDTOList[ii].formId) {
                  if (list[i].formSubDTOList[ii].formSubCollectionList) {
                    list[i].formSubDTOList[ii].formSubCollectionList.forEach((item) => {
                      if (item.formSubCollectionValueList) {
                        // 给之前保存 且拥有该元数据的参数加上 is_checked
                        item.formSubCollectionValueList.forEach((item2) => {
                          if (
                            a[l].children[ll].templateFormMetadataDealList
                              .formSubCollectionValueDealList
                          ) {
                            var flag = a[l].children[
                              ll
                            ].templateFormMetadataDealList.formSubCollectionValueDealList.some(
                              (item3) => {
                                return item2.metadataId == item3.id;
                              }
                            );
                            if (flag) {
                              item2.is_checked = true;
                            }
                          }
                        });
                      }
                      item.formSubCollectionValueDealList =
                        item.formSubCollectionValueList;
                    });
                    // 如果该formId 为tab下的列表
                    a[l].children[ll].formSubCollectionDealList =
                      list[i].formSubDTOList[ii].formSubCollectionList;
                  }
                }
              }
            }
          }
        }
      }
      console.log(a);
      mould_tabs.value = a;
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};
const get_menu_list = () => {
  axios
    .request({
      url: serviceApi.template_list + "?type=1&isFilter=" + false,
      method: "post",
    })
    .then((res) => {
      console.log(res);
      // 转 二级树
      if (res.data.length != 0) {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].isDisable) {
            res.data.splice(i, 1);
            i -= 1;
          }
        }
        res.data.sort(function (a, b) {
          return a.sort - b.sort;
        });
        menu_list.value = arrToTree(res.data);
        console.log(menu_list.value);
        default_menu.value = menu_list.value[0].children[0].id;
        get_mould_tabs_list("");
      }
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};
const mould_tabs = ref([]);
const get_mould_tabs_list = (e) => {
  tabs_value.value = 0;
  axios
    .request({
      url: serviceApi.mould_tabs_list,
      method: "post",
      data: { current: 1, pageSize: 100 },
    })
    .then((res) => {
      console.log(res);
      res.data.forEach((element) => {
        element.parentId === null ? "-1" : "";
        element.is_checked = false;
      });
      // 转 二级树
      mould_tabs.value = arrToTree(res.data);
      (MD.mgr[MgrDef.SCENE_MGR] as SceneMgr).clearALLMesh();
      console.log(default_menu.value);
      if (default_menu.value && default_menu.value != "") {
        get_template_setData(e == "" ? default_menu.value : e);
      }
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};
const metadata = ref();
const get_metadata = () => {
  axios
    .request({
      url: serviceApi.metadata_list,
      method: "post",
      data: { current: 1, pageSize: 1000, isTem: true },
    })
    .then((res) => {
      console.log(res);
      metadata.value = res.data.content;
      get_menu_list();
    })
    .catch((error) => {
      ElMessage.error(error);
    });
};

const arrToTree = (res_list) => {
  var list_1 = [];
  for (let i in res_list) {
    res_list[i].parentId == null ? (res_list[i].parentId = "-1") : res_list[i].parentId;
    if (res_list[i].parentId == -1) {
      res_list[i].children = [];
      list_1.push(res_list[i]);
    }
  }
  for (let i in res_list) {
    for (let ii in list_1) {
      if (list_1[ii].id == res_list[i].parentId) {
        list_1[ii].children.push(res_list[i]);
      }
    }
  }
  return list_1;
};
</script>

<style lang="scss" scoped>
:deep(.el-menu) {
  .el-sub-menu__title {
    background-color: #fff;
    &:hover {
      background-color: #fff;
    }
  }
  --el-menu-text-color: #333;
  --el-menu-hover-text-color: #333;
  --el-menu-bg-color: #fff;
  --el-menu-hover-bg-color: #fff;
}
:deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
  color: #333;
}
.tab_item span {
  display: inline-block;
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border: 1px solid #e6e8eb;
  border-bottom: none;
  cursor: pointer;
}
.form_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  :deep(.el-input__inner) {
    padding-right: 11px;
  }
  > div {
    width: 50%;
    > .el-form-item {
      padding: 5px 0;
    }
  }
  > .el-form-item {
    width: 50%;
    padding: 5px 0;
  }
}
:deep(.el-tabs__item) {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}
:deep(.el-tabs__content) {
  height: 0;
  padding: 5px;
}
.right {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 100%;
  width: calc(100% - 210px);
  flex-shrink: 0;
  > div {
    width: calc(50%);
    > div {
      padding: 10px;
    }
  }
  > div:last-child {
    border-left: 1px solid #e6e8eb;
    display: flex;
    flex-direction: column;
    > div:last-child {
      flex: 1;
      border-top: 1px solid #e6e8eb;
      margin-top: 10px;
      width: 710px;
      height: 734px;
      flex-shrink: 0;
    }
  }
}
.left {
  width: 200px;
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
